<template>
    <div class="productContainer">
        <div class="customeRow">
            <div class="nav">
                <router-link to="/home">主页</router-link>
                / {{navMessage[old_category_id]||'商品列表'}}
            </div>
            <el-row :gutter="0">
                <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                    <div class="categoryListContainer">
                        <div class="categoryListItem">
                            <div class="categoryListItemHeader">探索</div>
                            <div class="categoryListItemBody">
                                <el-input v-model="input" @change="handleSearchChange"></el-input>
                            </div>
                        </div>
                        <el-checkbox-group v-model="checkedCategory" @change="handleCheckedCitiesChange">
                            <div class="categoryListItem" v-for="(item,index) in category" :key="index">
                                <div class="categoryListItemHeader">{{item.name}}</div>
                                <div class="categoryListItemBody">
                                    <div v-for="(city,index1) in item.child" :key="index1"
                                         class="categoryListItemCheckbox">
                                        <el-checkbox :label="city.category_id">{{city.name}}</el-checkbox>
                                    </div>
                                </div>
                            </div>
                        </el-checkbox-group>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
                    <div class="productListContainer">
                        <div class="productListContainerHeader">
                            <!--                            <div class="productListContainerHeaderTitle">-->
                            <!--                                家用 / 相机包-适用于数码单反、无反光镜、测距仪、CSC、数码及模拟胶片相机。/ 背包-->
                            <!--                            </div>-->
                            <div class="productListContainerHeaderSubTitle">
                                Billingham诞生于1973年，{{infoMessage[old_category_id]||'你在这里可以查看到我们的产品。'}}
                            </div>
                            <div class="productListContainerHeaderMessage">
                                我们的相机包、笔记本电脑包、旅行包以及野外远足包均是采用最好的材料，如三层防水织物，顶级的皮革和坚实的黄铜。在英国由经验丰富的匠人所打造。全球可航运。
                            </div>
                            <div class="productListContainerHeaderMessage">
                                如果您需要帮助选购包，请随时与我们联系！
                            </div>
                        </div>
                        <div class="phoneCategoryList">
                            <el-row :gutter="8">
                                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                                    <div class="phoneCategoryListItem">
                                        <label>搜索</label>
                                        <el-input
                                                placeholder="请输入"
                                                @change="handleSearchChange"
                                                v-model="input">
                                        </el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-checkbox-group v-model="checkedCategory" @change="handleCheckedCitiesChange">
                                <el-collapse accordion>
                                    <el-collapse-item :title="item.name" :name="1+index"  v-for="(item,index) in category" :key="index">
                                        <el-checkbox v-for="(city,index1) in item.child" :key="index1"
                                                     :label="city.category_id">{{city.name}}
                                        </el-checkbox>
                                    </el-collapse-item>
                                </el-collapse>
<!--                                                                    <div class="categoryListItem" v-for="(item,index) in category" :key="index"-->
<!--                                                                         style="padding: 0 4px;">-->
<!--                                                                        <div class="categoryListItemHeader">{{item.name}}</div>-->
<!--                                                                        <div class="categoryListItemBody">-->
<!--                                                                            -->
<!--                                                                        </div>-->
<!--                                                                    </div>-->
                            </el-checkbox-group>
                        </div>
                        <div class="productListContainerBody" v-if="goodsList.length>0">
                            <div v-for="(itemIndex,keyIndex) in indexList" :key="keyIndex">
                                <el-row :gutter="8">
                                    <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" v-for="(item,index) in itemIndex"
                                            :key="index">
                                        <div class="productListContainerBodyItem"
                                             @click="handleRedirectDetail(goodsList[item].goods_id)">
                                            <div class="productListContainerBodyItemImg">
                                                <img :src="goodsList[item].goods_image" alt="billingham"/>
                                            </div>
                                            <div class="productListItemName">
                                                {{goodsList[item].goods_name}}
                                            </div>
                                            <div class="productListItemPrice">
                                                ￥{{goodsList[item].goods_sku.line_price}}
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <el-pagination
                                    style="margin-top: 30px"
                                    layout="prev, pager, next"
                                    @current-change="handlePageChange"
                                    :hide-on-single-page="true"
                                    :page-size="pagination.pageSize"
                                    :current-page="pagination.currentPage"
                                    :total="pagination.total">
                            </el-pagination>
                        </div>
                        <div class="noData" style="margin-top: 30px;" v-if="goodsList.length<=0&&!loading">
                            <img src="../assets/noData.png" alt="billingham"/>
                            <div class="text">暂无数据</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Row, Col, Popover, Input, Checkbox, CheckboxGroup, Select, Option, Message, Pagination,Collapse,CollapseItem} from 'element-ui';
    import serve from '../util/serve';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Popover);
    Vue.use(Input);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Pagination);
    Vue.use(Collapse);
    Vue.use(CollapseItem);
    export default {
        name: 'Blog',
        data: () => {
            return {
                visible: false,
                checkedCategory: [],
                category: [],
                cities1: ['肩包', '可拆卸肩吊带', '可附加端口袋'],
                input: '',
                pagination: {pageSize: 57, total: 0, currentPage: 1},
                goodsList: [],
                loading: false,
                search: '',
                category_id: 0,
                indexList: [],
                old_category_id: 0,
                navMessage: {
                    10136: '相机包-为单反，微单，旁轴相机，数字相机和模拟胶片相机而设计',
                    10140: '望远镜包',
                    10143: '休闲包-时尚的休闲包，旅行包和公文包',
                    10528: '电脑包',
                    10142: '配件-专门搭配Billingham包'
                },
                infoMessage: {
                    10136: '你在这里可以查看到我们相机包系列的所有产品。',
                    10140: '你在这里可以查看到我们望远镜包系列的所有产品。',
                    10143: '你在这里可以查看到我们休闲包系列的所有产品。',
                    10528: '你在这里可以查看到我们电脑包系列的所有产品。',
                    10142: '你在这里可以查看到我们所有配件。'
                }
            }
        },
        components: {},
        props: {},
        metaInfo() {
            const category_id = this.$route.query.category_id;
            let param = '/product';
            let metaParam = 'product';
            if (category_id) {
                param = `/product?category_id=${category_id}`;
                metaParam = `product?category_id=${category_id}`;
            }
            return serve.handleSetMeta(metaParam, param);
        },
        mounted() {
            window.scroll(0, 0);
            let category_id = 0;
            if (this.$route.query.category_id) {
                category_id = this.$route.query.category_id;
                this.checkedCategory = [Number(category_id)];
            }
            this.handleGetProduct(category_id, '');
            this.handleGetCategory();
        },
        methods: {
            handleCheckedCitiesChange(e) {
                const {search} = this;
                let category_id = 0;
                if (e.length > 0) {
                    category_id = e[e.length - 1];
                    this.checkedCategory = [e[e.length - 1]];
                }
                this.handleDealSearch(category_id, search, 0);
            },
            /**
             * 跳转到商品详情页
             * @param id
             */
            handleRedirectDetail(id) {
                localStorage.setItem('category_id', this.old_category_id);
                this.$router.push('/product/' + id);
            },
            /**
             * 获取产品列表
             * @param category_id
             * @param search
             * @param page
             */
            handleGetProduct(category_id, search, page = 0) {
                const loading = serve.doLoading();
                const _this = this;
                _this.loading = true;
                _this.category_id = category_id;
                _this.old_category_id = category_id;
                _this.search = search;
                _this.goodsList = [];
                _this.allGoodsList = [];
                const categories = Object.keys(_this.navMessage);
                const check = categories.some((item) => {
                    return item === category_id;
                });
                if (!category_id || !check) {
                    _this.loading = false;
                    loading.close();
                    return;
                }
                const params = {
                    page,
                    sortType: 'all',
                    category_id,
                    listRows: 57,
                    search
                };
                const url = serve.handleGetUrl('getGoodsList', params);
                serve.doPost(url, {category_id, search, page, listRows: 57})
                    .then((response) => {
                        loading.close();
                        _this.loading = false;
                        const data = response.data;
                        if (data.code === 1) {
                            window.scroll(0, 0);
                            const list = data.data.list;
                            _this.pagination = Object.assign({}, _this.pagination, {
                                total: list.total,
                                currentPage: page
                            });
                            const goodsList=list.data;
                            goodsList.sort(_this.sortBy('goods_sort'));
                            _this.goodsList = goodsList;
                            _this.indexList = serve.handleGetIndexList(list.data);
                            _this.allGoodsList = list.data;
                        } else {
                            Message({
                                message: data.msg || '请求错误',
                                type: 'error'
                            });
                        }
                    }).catch(() => {
                    loading.close();
                    _this.loading = false;
                });
            },
            /**
             * 排序
             */
            sortBy(field){
                return (x,y)=>{
                    return x[field]-y[field];
                }
            },
            /**
             * 获取分类列表
             */
            handleGetCategory() {
                const _this = this;
                const url = serve.handleGetUrl('getCategory', {});
                const loading = serve.doLoading();
                serve.doPost(url, {})
                    .then((response) => {
                        loading.close();
                        const data = response.data;
                        if (data.code === 1) {
                            const list = data.data.list;
                            _this.category = list.slice(7);
                        } else {
                            Message({
                                message: data.msg || '请求错误',
                                type: 'error'
                            });
                        }
                    }).catch(() => {
                    loading.close();
                });
            },
            /**
             * 处理页码变化事件
             * @param e
             */
            handlePageChange(e) {
                const {category_id, search} = this;
                this.handleGetProduct(category_id, search, e);
            },
            /**
             * 处理输入框搜索变化事件
             * @param e
             */
            handleSearchChange(e) {
                const {category_id} = this;
                this.handleDealSearch(category_id, e, 0);
            },

            /**
             * 处理搜索事件
             * @param category_id
             * @param search
             * @param page
             */
            handleDealSearch(category_id, search, page = 0) {
                const loading = serve.doLoading();
                const _this = this;
                _this.loading = true;
                _this.category_id = category_id;
                _this.search = search;
                const {allGoodsList} = this;
                console.log(category_id, search, page);
                const goodsList = allGoodsList.filter((item) => {
                    const categories = Object.keys(item.goods_categories);
                    const goods_name = item.goods_name.toLowerCase();
                    search = search.toLowerCase();
                    const hasCheck = categories.some((item) => {
                        return item === category_id.toString();
                    });
                    if (search && category_id) {
                        if (goods_name.indexOf(search) > -1 && hasCheck) {
                            return true;
                        }
                    } else if (search && !category_id) {
                        if (goods_name.indexOf(search) > -1) {
                            return true;
                        }
                    } else if (!search && category_id) {
                        if (hasCheck) {
                            return true;
                        }
                    } else {
                        return true;
                    }
                    return false;
                });
                console.log(goodsList);
                loading.close();
                const indexList = serve.handleGetIndexList(goodsList);
                _this.indexList = indexList;
                _this.goodsList = goodsList || [];
                _this.loading = false;
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .phoneCategoryList {
        display: none;
    }

    .phoneCategoryList .el-collapse-item__header{
        font-weight: bold;
        color: #000;
    }

    .phoneCategoryListItem {
        margin-top: 20px;
    }

    .phoneCategoryListItem .el-select {
        width: 100%;
    }

    .phoneCategoryListItem label {
        font-size: 14px;
        font-weight: bold;
        color: #000;
    }

    .productContainer {
        padding: 0 0 50px 0;
    }

    .categoryListContainer {
    }

    .categoryListItemHeader {
        font-weight: bold;
        font-size: 14px;
        color: #000;
        border-bottom: 1px solid #999;
        line-height: 26px;
        margin-top: 10px;
    }

    .categoryListItemBody {
        padding: 15px 0;
    }

    .categoryListItemBody .el-input__inner {
        height: 32px;
        outline: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .categoryListItemCheckbox {
        margin-top: 5px;
    }

    .productListContainer {
        padding-left: 20px;
        padding-right: 4px;
    }

    .productListContainerHeader {
        background: #f4f4f4;
        padding: 20px 15px;
        font-size: 15px;
    }

    .productListContainerHeaderTitle {
        color: #999;
        font-size: 14px;
    }

    .productListContainerHeaderSubTitle {
        font-weight: bold;
        color: #000;
        margin-top: 15px;
    }

    .productListContainerHeaderMessage {
        margin-top: 15px;
        line-height: 24px;
    }

    .productListContainerBodyItem {
        cursor: pointer;
    }

    .productListContainerBodyItemImg {
    }

    .productListContainerBodyItemImg img {
        width: 100%;
    }

    .productListItemColor {
    }

    .productListItemColor img {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .productListItemName {
        font-size: 14px;
    }

    .productListItemPrice {
        font-weight: bold;
        color: #000;
        margin-top: 2px;
    }

    @media screen and (max-width: 768px) {
        .categoryListContainer {
            display: none;
        }

        .phoneCategoryList {
            display: block;
        }

        .productListContainer {
            padding: 0 10px;
        }

        .productListContainerBodyItemImg {
            width: auto;
            height: auto;
        }
    }

    @media screen and (min-width: 420px) and (max-width: 768px) {
        .productListContainerBodyItemImg {
            width: 50%;
            margin: 0 auto;
        }

        .productListContainerBodyItem {
            text-align: center;
        }
    }

    @media screen and (max-width: 420px) {
        .productListContainerBodyItemImg {
            width: auto;
            height: auto;
        }
    }


</style>
